<template>
  <div class="folder-rename">
    <div class="left">
      <top-bar
        :table-data="tableData"
        :act-btn-text="'开始命名'"
        :flag="FLAG"
        @add="handleAdd"
        @update="handleUpdate"
      />
      <div class="center">
        <template v-if="tableData.length === 0">
          <upload-module :flag="FLAG" @change="getPathList" />
        </template>
        <template v-else>
          <table-module
            ref="tableModuleRef"
            :table-data="tableData"
            @remove="handleRemove"
            @reset="handleReset"
          />
        </template>
      </div>
      <save-as v-show="tableData.length > 0" />
    </div>
    <rename-workbench :flag="FLAG" :table-data="tableData" />
  </div>
</template>

<script lang="ts" setup>
import TopBar from '@renderer/components/TopBar/index.vue'
import UploadModule from '@renderer/components/UploadModule/index.vue'
import TableModule from '@renderer/components/TableModule/index.vue'
import SaveAs from '@renderer/components/SaveAs/index.vue'
import useTableData from '@renderer/hooks/useTableData'
import RenameWorkbench from '@renderer/views/Workbench/RenameWorkbench.vue'
import { ref, nextTick } from 'vue'

const FLAG = 'folder'

// 表格数据
const tableData = ref<ITableDataItem[]>([])

const { getPathList, handleAdd, handleReset, handleRemove } = useTableData(
  tableData,
  FLAG
)

const tableModuleRef = ref<InstanceType<typeof TableModule>>()

async function handleUpdate(preload: ITableDataItem[]) {
  tableData.value = preload
  await nextTick()
  if (tableModuleRef.value) {
    // 重新加载表格数据
    tableModuleRef.value.reload()
  }
}
</script>

<style lang="less" scoped>
.folder-rename {
  display: flex;

  .left {
    flex: 1;
    display: flex;
    flex-direction: column;

    .center {
      flex: 1;
    }
  }
}
</style>
